Работа 9: Графика

9

Графика

Поговорим о компьютерной графике. Весьма условно ее можно разделить на три вида или, если хотите, направления:

1) графика, созданная программистом или пользователем самостоятельно (с помощью графического редактора, средств программирования, "псевдографики" и пр.);
2) графика, полученная в результате работы программы по какому-то алгоритму (графики функций, линии на форме и пр.);
3) графика, сделанная не программистом и не пользователем, т.е. полученная ими откуда-то извне в уже готовом виде.

Для первого типа графики в VB есть два элемента управления: Line (линия) и Shape (фигура). Элемент Line предназначен для вывода на форму различных линий, которые могут выполнять декоративную или функциональную роль - в зависимости от замысла программиста. Список свойств элемента Line невелик:

1) Name - имя элемента.
2) BorderColor - цвет линии.
3) BorderStyle - стиль линии (сплошная, пунктирная, и пр.)
4) X1, X2, Y1, Y2 - координаты первого и второго конца линии.

Элемент Shape имеет не намного больше свойств:

1) Name - имя фигуры.
2) BackColor - устанавливает цвет фона фигуры.
3) BackStyle - устанавливает прозрачность фигуры.
4) BorderColor - устанавливает цвет границы объекта.
5) BorderStyle - устанавливает стиль границы объекта.
6) FillColor - устанавливает цвет заполнения контуров объекта.
7) FillStyle - устанавливает образец заполнения объекта (сплошное заполнения, горизонтальные, вертикальные линии, сетка и пр.)
8) Shape - определяет вид фигуры: 0 - прямоугольник, 1 - квадрат, 2 - овал, 3 - круг, 4 - скругленный прямоугольник, 5 - скругленный квадрат.

Второй тип компьютерной графики нас не интересует.

Третий тип - самый интересный, т.к. дает возможность программисту добавлять в свое приложение действительно красивые рисунки и анимацию. Для того, чтобы помещать на форму рисунки различных форматов в VB есть два элемента управления: Image (рисунок, изображение) и PictureBox ("квадрат рисунка"). Эти элементы имеют практически один и тот же набор свойств и отличаются только лишь тем, что элемент Image работает быстрее и использует меньше системных ресурсов, а элемент PictureBox поддерживает больше свойств и событий. Мы не будем рассматривать все свойства этих элементов, поговорим лишь о двух:

1) Picture - свойство, в котором храниться полный путь к графическому файлу.
2) Stretch - логическое свойство, указывающее на то, будет ли рисунок "втиснут" в те границы, которые наметил для него программист-разработчик, или рисунок будет выведен в указанные границы частично (сколько поместится).

Мы поговорим об элементах Image и PictureBox чуть позже, а пока рассмотрим стандартный элемент управления Timer (таймер). До сих пор мы сталкивались с процедурами, которые работали с элементами управления (или были вызываемыми функциями), причем эти процедуры срабатывали после какого-то действия: пользователь щелкнул на чем-то мышью, пользователь нажал что-то на клавиатуре и пр. А объект Timer (таймер) создает процедуру, которая работает через некоторое количество времени.
Свойства элемента Timer:
1) Name - имя элемента.
2) Interval - хранит число миллисекунд, через которые вызывается процедура NameTimer_Timer().

А теперь пришло время воспользоваться информацией, которой у нас в данной лабораторной работе накопилось в избытке. Мы будем делать небольшой мультфильм.

Большой пример. Создать мультфильм, в котором по голубому небу с белыми облаками летит самолет. Итак, начнем думать: как это сделать? Для реализации этого мультфильма нам необходимы как минимум два рисунка: облако и самолет. Мы вполне можем нарисовать их в стандартном Windows'ком редакторе Paint и сохранить в формате .bmp - пусть это будут файлы oblako.bmp, samolet.bmp. Самое главное: пусть эти рисунки будут выполнены на стандартном голубом фоне.

Теперь разместим на форме стандартного VB-проекта эти рисунки, причем установим свойство BackColor формы равным H00FFFF80 (голубой цвет). Рисунки можно размещать хоть в элементе Image, хоть в элементе PictureBox - это неважно. Главное: поместить самолет на форме слева, а облака поместить в нескольких элементах (Image или PictureBox), различных по размерам, со свойством Stretch, установленным в True (истина). Тогда мы получим много "разнокалиберных" облаков и один самолет. Общий вид приложения может должен получиться примерно такой:

Установим свойство элемента, в котором находится самолет, равным imgBoing (или boxBoing, если вы выбрали элемент PictureBox). А теперь опять подумаем: как наш самолет должен лететь? Очевидно, что рисунок imgBoing должен через какое-то определенное время изменять свои координаты, перемещаясь вправо. Причем, для перемещения достаточно изменять всего одну координату - Left (расстояние между левым краем объекта и левой границей его контейнера). Вопрос: а в чем изменять элементу imgBoing его координату? Конечно в процедуре, которая выполняется через определенное время, в процедуре элемента Timer.

Поместим на форму элемент Timer. Когда он находится на (загруженной) форме, то его совершенно не видно - он работает незаметно. Установим свойство Interval элемента Timer1 равным 100 миллисекундам и два раза кликнем на нем, чтобы сгенерить процедуру Timer1_Timer().
Private Sub Timer1_Timer()
imgBoing.Left = imgBoing.Left + 30
End Sub

Нам совершенно неинтересно, что: с точки зрения аниматоров наша программа работает отвратительно. В процессе движения наш самолет "задевает" облака, перекрывая их или заходя "за" них. Мы могли бы сказать, что все так и планировалось, но наши рисунки (к сожалению) прямоугольные, поэтому голубой угол самолета, перемещающийся по облаку, выглядит несколько странно. К сожалению, пока мы не можем этого убрать...

Нам совершенно неинтересно, что: в этой работе мы изучили целых пять стандартных элементов управления.

Задания по лабораторной работе 9

1. Прочитать и законспектировать работу, проверить пример.
2. Разобрать два дополнительных примера (только для тех, у кого есть пособие и дискета с дополнительными примерами).
3. Выбрать любое отчетное задание: "создать программу, в которой..."

1 облака летят навстречу самолету, создавая тем самым иллюзию его движения (если облако "долетело" до левого края формы, то оно должно заново появится с правого края);

2 с использованием только лишь двух элементов управления Line и Shape нарисовать на форме космический корабль, двух космонавтов и автобус, доставивший их к месту старта;

3 с использованием только лишь двух элементов управления Line и Shape нарисовать на форме парусный корабль, на носу которого стоит бородатый пират с попугаем на плече и саблей;

4 демонстрируется мультфильм: в космический корабль заходят два космонавта, корабль поднимается вертикально вверх и исчезает в голубом небе среди белоснежных облаков;

5 демонстрируется мультфильм: по бушующему морю мчится парусный корабль, на носу которого стоит бородатый пират с попугаем на плече и машет саблей невидимому нам кораблю, скрытому низко клубящимися белоснежными облаками.

Хостинг от uCoz

1	облака летят навстречу самолету, создавая тем самым иллюзию его движения (если облако "долетело" до левого края формы, то оно должно заново появится с правого края);
2	с использованием только лишь двух элементов управления Line и Shape нарисовать на форме космический корабль, двух космонавтов и автобус, доставивший их к месту старта;
3	с использованием только лишь двух элементов управления Line и Shape нарисовать на форме парусный корабль, на носу которого стоит бородатый пират с попугаем на плече и саблей;
4	демонстрируется мультфильм: в космический корабль заходят два космонавта, корабль поднимается вертикально вверх и исчезает в голубом небе среди белоснежных облаков;
5	демонстрируется мультфильм: по бушующему морю мчится парусный корабль, на носу которого стоит бородатый пират с попугаем на плече и машет саблей невидимому нам кораблю, скрытому низко клубящимися белоснежными облаками.